<style lang="scss" scoped>
	.cate{ background:#f7f7f7; border-bottom:1px solid #eee; overflow:hidden; 
			.item{ float:left; border-right:1px solid #eee; height:80rpx; text-align:center; line-height:80rpx; overflow:hidden; width:50%; }
			.item.on{ color:$main-color;}
	} 
	.arclist{ overflow: hidden; padding:0 20rpx;
	  .item{ border-bottom:1px dotted #eee; display:flex; padding:30rpx 0;						
						  .img{ height:180rpx; width:200rpx;}
								.text{ flex:1; overflow:hidden; margin-left:20rpx;}
								.tit{ white-space: nowrap; text-overflow:ellipsis; overflow: hidden;}
								.time{ color:#999; padding:5px 0;}
								.note{ color:#999; overflow: hidden; line-height:42rpx; text-overflow: ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;}
			}
	}
</style>
<template>
 <view>
		 <view class="cate">
				 <view class="item" :class="query.cid==item.id?'on':''" @tap="selectCate(item.id)" v-for="(item,index) in cate" :key="index">{{item.title}}</view>
			</view>
			<view class="arclist">
				  <view class="item" @tap="go(item.id)" v-for="(item,index) in list" :key="index">							
									<view class="img"><image :src="item.img"></image></view>
									<view class="text">
										<view class="tit">{{item.title}}</view>
										<view class="time">时间：{{item.datetime}}</view>
										<view class="note">{{item.note}}</view>
									</view>
						</view>					
			</view>
			<view v-if="list.length > 0 && !nomore" class="more">显示更多<image src="/static/loading.gif" /></view>
			<view v-if="list.length> 0 && nomore" class="more">没有更多数据啦!</view>
			<view class="nodata" v-if="nodata">
				  <image src="/static/noimg.png"></image>
						<view>暂无文章~</view>
			</view>
	</view>
</template>

<script>
	
	export default{
		  data(){
					  return{
								  cate:[],
								  nodata:false,
								  nomore:false,
								  query:{
											 nid:'',
												cid:'',
								  		current:1,
								  		size:10
								  },
								  list:[],
							}
				},
				
				onLoad(e){
					 this.query.nid = e.nid;
					 this.getCate();
				},
				
				//下拉刷新
				onPullDownRefresh(){
					  this.nodata = false;
					  this.nomore = false;
					  this.query.current=1;
					  this.list = [];
					  this.getList();
							setTimeout(function() {
									uni.stopPullDownRefresh();
							}, 1200);
				},
				
				//上拉加载更我				
				onReachBottom(){
					  if(!this.nomore){
					  		this.query.current++
					  		this.nomore = false
					  		this.getList()
					  } 
				},
				
				methods:{					 
					  
							//获取分类
							async getCate(){
								  const json = await this.api.getCate({m:'get',q:this.query,loading:false});
										if(json.data.code==0){
											  this.cate = json.data.data;
													this.query.cid = this.cate[0].id;
													this.getList();
										}
							},
							
					  //切换列表
					  selectCate(cid){
					  			this.nodata = false;
					  			this.nomore = false;
					  			this.query.current=1;
										this.query.cid = cid;
					  			this.list = [];
					  			this.getList();
					  },
					  
					  //列表列表
					  async getList(){
					  	 let that = this;
					  	 const json = await this.api.getList({m:'get',q:this.query});
					  		if(json.data.code==0){
					  					let total = json.data.total;
					  					if(total==0){ this.nodata = true; }
					  					if(this.query.current==1){
					  						this.list = json.data.data;
					  					}else{
					  						this.list = this.list.concat(json.data.data);
					  					} 
					  					if(this.list.length==total){ this.nomore = true;}
					  		}								
					  },		
												
							go(id){
								 this.api.go('/pages/article/detail?id='+id);
							},
							
				}
				
	}
</script>

<style>
</style>
